<template>
  <el-dialog
    v-model="visible"
    title="未读通知提醒"
    width="400px"
    :before-close="handleClose"
  >
    <div class="unread-message-content">
      <el-icon class="notification-icon"><Bell /></el-icon>
      <p>您有 <span class="highlight">{{ unreadCount }}</span> 条未读通知</p>
      <p v-if="oldestTime" class="time-reminder">
        最早未读通知来自 <span class="highlight">{{ oldestTime }}</span> 前
      </p>
    </div>
    <template #footer>
      <el-button type="primary" @click="goToNotification" round>
        <el-icon><List /></el-icon>
        查看详情
      </el-button>
      <el-button @click="handleClose" round>稍后处理</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Bell, List } from '@element-plus/icons-vue'

const router = useRouter()
const visible = ref(false)
const unreadCount = ref(0)
const oldestTime = ref('')

const show = (count, time) => {
  unreadCount.value = count
  oldestTime.value = time
  visible.value = true
}

const handleClose = () => {
  visible.value = false
}

const goToNotification = () => {
  router.push('/employee/notification')
  handleClose()
}

defineExpose({ show })
</script>

<style scoped>
.unread-message-content {
  text-align: center;
  padding: 20px 0;
}

.notification-icon {
  font-size: 40px;
  color: var(--el-color-warning);
  margin-bottom: 15px;
}

.highlight {
  color: var(--el-color-primary);
  font-weight: bold;
  font-size: 18px;
}

.time-reminder {
  margin-top: 10px;
  color: var(--el-text-color-secondary);
}

.el-button {
  padding: 10px 20px;
}
</style>
